<template>
    <div>
        <div class="filter-container">
            <el-date-picker v-model="dateRange" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="left">
            </el-date-picker>
            <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="male filter-item" placeholder="交易单号" v-model="listQuery.tranNumber" clearable>
            </el-input>
            <el-select clearable class="male filter-item" style="width: 160px" v-model="listQuery.fuid" placeholder="所属账户"  v-show="isSubAccount==0">
                <el-option v-for="item in subAccountList" :key="item.key" :label="item.subAccount" :value="item.id">
                </el-option>
            </el-select>
            <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="male filter-item" placeholder="商品名称" v-model="listQuery.productName" clearable>
            </el-input>
            <el-select clearable class="male filter-item" style="width: 160px" v-model="listQuery.tranType" placeholder="买卖类型">
                <el-option v-for="item in selectOption1" :key="item.key" :label="item.label" :value="item.key">
                </el-option>
            </el-select>
            <el-select v-model="listQuery.tradeType" placeholder="请选择商品分类">
              <el-option :label="item.tradeTypeName" :value="item.tradeType" v-for="(item,index) in GoodsTradeTypeList" :key="index"></el-option>
            
          </el-select>
          </el-select>
            <el-button class="filter-item male" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
        </div>
        <el-table :data="list" border fit highlight-current-row style="width: 100%;">
            
            <el-table-column align="center" label="交易单号">
                <template slot-scope="scope">
                <span>{{scope.row.entrustNumber}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="交易时间">
                <template slot-scope="scope">
                <span>{{scope.row.createTime}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="所属帐户"  v-if="isSubAccount==0">
                <template slot-scope="scope">
                <span>{{scope.row.cuser}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="商品名称">
                <template slot-scope="scope">
                <span>{{scope.row.productName}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="买卖类型">
                <template slot-scope="scope">
                <span v-html="scope.row.entrustType==0?'购买':'寄售'"></span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="成交数量">
                <template slot-scope="scope">
                <span>{{scope.row.tranCount}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="成交价格/元">
                <template slot-scope="scope">
                <span>{{scope.row.tranPrice}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="成交总额/元">
                <template slot-scope="scope">
                <span>{{scope.row.tranPriceAll}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="手续费/元">
                <template slot-scope="scope">
                <span>{{scope.row.fee}}</span>
                </template>
            </el-table-column>
            <el-table-column
            prop="tradeTypeName"
            label="商品分类"
            
           >
          
          </el-table-column>
        </el-table>
        <div class="pagination-container">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.currentPage" :page-sizes="[5,10,20,30,40]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
        </div>
    </div>
</template>
<script>
import { parseTime } from '../../api/time.js'
export default {
   data() {
    return {
      list: null,
      total: 0,
      listLoading: false,
      isSubAccount: JSON.parse(localStorage.getItem("userInfo")).isSubAccount,
      subAccountList: JSON.parse(localStorage.getItem("userInfo")).subAccountList,
      listQuery: {
        tranType: '',
        productName: '',
        startTime: '',
        endTime: '',
        fuid: '',
        tradeType:'',
        tranNumber: '',
        userId: JSON.parse(localStorage.getItem("userInfo")).userId,
        // userId: JSON.parse(localStorage.getItem("userInfo")).userId,
        currentPage: 1,
        pageSize: 10
      },
      dateRange: '',
      typeOptions: '',
      GoodsTradeTypeList:[],
      selectOption1: [
        {
          label: '寄售',
          key: '1'
        },
        {
          label: '购买',
          key: '0'
        }
      ],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  computed: {
   
  },
  created() {
      this.getList();
      this.getGoodsTradeTypeList()
  },
  watch: {
    dateRange: function() {
      if (this.dateRange === null) {
        this.listQuery.startTime = ''
        this.listQuery.endTime = ''
      } else {
        this.listQuery.startTime = parseTime(this.dateRange[0])
        this.listQuery.endTime = parseTime(this.dateRange[1])
      }
    }
  },
  methods: {
    tradeType(id){
      let params = '';
      switch(id){
        case 1:
        params = '活期交易商品';
        break;
        case 2:
        params = '定期交易商品';
        break;
        default:

      }
      return params
    },
    async getGoodsTradeTypeList(){
        let {data} = await this.$post({
            api:'/api/goods/getGoodsTradeTypeList',
            
        })
        if(data.code === 0){
            this.GoodsTradeTypeList = data.data
            console.log(data)
        }
    },
    getList(){
      var that = this
      that.$post({
            api: "/tran/entrustDetailList",
            data: that.listQuery
        }).then(({ data }) => {
        if(data.code === 0){
            that.list = data.data.list
            that.total = data.data.total
        }
        console.log("entrustDetailList",data)
        });
    },
    handleFilter() {
      this.listQuery.currentPage = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.currentPage = val
      this.getList()
    },
    handleUpdate(row) {
     
    },
    handleRemove(row) {
    }
  }
}
</script>

<style lang="scss" scoped>


</style>

